Menu dan Navigasi dengan CSS. Dibuat oleh Achmad Solichin (http://achmatim.net) dkk

1. Desain dan
Pemrograman Web 1
PG110 – 3 SKS
© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur
Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260
Website: http://fti.bl.ac.id Email: sekretariat_fti@bl.ac.id
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 1

2. PERTEMUAN 09
MENU BERBASIS CSS
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 2

3. Menu dengan CSS
 Buat file
baru
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 3

4. Menu dengan CSS
 Layout > Insert Div Tag
 Nama ID = menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 4

5. Menu dengan CSS
 Buat daftar menu (enter untuk item menu)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 5

6. Menu dengan CSS
 Ubah daftar menu menjadi List
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 6

7. Menu dengan CSS
 Ubah masing-masing item menu menjadi link
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 7

8. Menu dengan CSS
 Aktifkan object DIV menu (1) dan buat CSS baru (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 8

9. Menu dengan CSS
 Buat aturan CSS baru, CSS disimpan di dokumen baru
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 9

10. Menu dengan CSS
 Simpan file CSS
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 10

11. Menu dengan CSS
 Atur warna background menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 11

12. Menu dengan CSS
 Atur lebar box menu (2) dan padding (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 12

13. Menu dengan CSS
 Hasil sementara (box menu berwarna biru)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 13

14. Menu dengan CSS
 Sorot object <ul> (1) dan buat CSS baru (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 14

15. Menu dengan CSS
 Selector = #menu ul (2) dan definisikan CSS di
style.css (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 15

16. Menu dengan CSS
 Ubah type list menjadi none (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 16

17. Menu dengan CSS
 Atur padding (2), margin (3) box menu item
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 17

18. Menu dengan CSS
 Item menu menjadi agak renggang dan bullet hilang
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 18

19. Menu dengan CSS
 Sorot object <a> (1) dan buat aturan CSS baru untuk
mengatur masing2 item menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 19

20. Menu dengan CSS
 Selector = #menu a (2) dan define di file style.css (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 20

21. Menu dengan CSS
 Atur font (2), ukuran (3), warna (4) dan hilangkan garis
bawah menu (5)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 21

22. Menu dengan CSS
 Atur warna background item menu (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 22

23. Menu dengan CSS
 Atur display menu menjadi “Block” (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 23

24. Menu dengan CSS
 Atur padding (2) item menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 24

25. Menu dengan CSS
 Hasil sementara
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 25

26. Menu dengan CSS
 Buat aturan CSS baru. Selector = #menu a:hover untuk
mengatur CSS saat menu di-hover
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 26

27. Menu dengan CSS
 Atur warna tulisan (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 27

28. Menu dengan CSS
 Atur background item menu (2)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 28

29. Menu dengan CSS
 Hasil akhir
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 29

30. Menu dengan CSS
 Artikel lengkap : Membuat Menu CSS dengan
Dreamweaver
 Kembangkan untuk tampilan menu yang lebih
menarik
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 30

31. Contoh Menu
 Listamatic
http://css.maxdesign.com.au/listamatic
 CSS Based Menu
http://www.smashingmagazine.com/2007/03
/14/css-based-navigation-menus-modern-
solutions/
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 31

32. Terima Kasih
Fakultas Teknologi Informasi
Universitas Budi Luhur
http://fti.bl.ac.id
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 32